<template>
  <div class="topNav">
    <div class="logo">
      <img src="../assets/img/logo.png"  alt=""/>
    </div>
    <div class="sys-name">{{title}}</div>
<!--    <div class="sys-name">未成年人性侵案件分析平台</div>-->

    <div @click="handleAI" class="ai">
      <img src="../assets/img/icon-ai.png"  alt=""/>
      AI小助手
    </div>
    <!-- 用户信息 -->
    <div class="account-box">
      <img class="account-avatar" :src="userInfo?.Avatar || defaultAvater" alt="">
      <span class="account-name">{{userInfo?.username}}</span>
      <i class="el-icon-arrow-down icon-ct icon-down"></i>
      <i class="el-icon-arrow-up icon-ct icon-up"></i>
      <div class="alert-nav-link">
        <p class="item" @click="jumpSystem('/SystemManage/DepartmentManage')" v-permission="'/SystemManage/DepartmentManage'">
          <a href="javascript:;">
            <i class="icon iconfont icon-tuanduiguanli"></i>
            <span>团队管理</span>
          </a>
        </p>
        <p class="item" @click="jumpSystem('/SystemManage/RoleManage')" v-permission="'/SystemManage/RoleManage'">
          <a href="javascript:;">
            <i class="icon iconfont icon-a-jueseguanli"></i>
            <span>角色管理</span>
          </a>
        </p>
        <p class="item" @click="logout('')">
          <a href="javascript:;">
            <i class="icon iconfont icon-gerenzhongxin"></i>
            <span>退出登录</span>
          </a>
        </p>
      </div>
    </div>
  </div>
</template>

<script>

import { mapActions } from 'vuex'
export default {
  name: 'topNav',
  data () {
    return {
      title:'',
      userInfo: JSON.parse(localStorage.getItem('userInfo')),
      activeIndex: '1',
      menu: [],
      options: [],
      loading:false,
      LikeName:'',
      queryName:'',
      defaultAvater:require('../assets/img/icon-avater.png')
    }
  },
  watch: {
    '$route.path': function (val) {
      let active = this.menu.find(item => val.startsWith(item.to))
      active && (this.activeIndex = active.index)
    }
  },
  methods: {
    ...mapActions('myadmin/account'),
    jumpSystem(path){
      this.$router.push({ path: path });
    },
    logout(){
      localStorage.removeItem('token')
      localStorage.removeItem('userInfo')
      localStorage.removeItem('menuPermission')
      this.$router.push({ path: '/login' })
    },
    handleAI(){
      this.$router.push({ path: '/SystemManage/AiHelper' })
    },
  },
  mounted () {
    this.title = process.env.VUE_APP_TITLE
  }
}
</script>

<style lang="scss" scoped>
.topNav {
  display: flex;
  align-items: center;
  width: 100%;
  height: 70px;
  background-color: #FFFFFF;

  .logo {
    display: flex;
    align-items: center;
    padding: 0 28px 0 24px;
    img{
      width: 44px;
      height: 44px;
    }
  }
  .sys-name{
    flex: 1;
    font-weight: 700;
    font-size: 24px;
    color: #0B085F;
    line-height: 24px;
  }
  .ai{
    margin-right: 100px;
    display: flex;
    align-items: center;
    color: #6C6C6C;
    cursor: pointer;
    img{
      width: 52px;
      height: 52px;
      margin-right: 15px;
    }
  }
}
.icon{
  cursor: pointer;
  font-size: 20px;
  color: #FFFFFF;
  &:hover{
    color: #0B085F;
  }
}
.search-box{
  position: relative;
  width: 240px;
  height: 30px;
  .input-with-select{
    width: 100%;
    border-radius: 15px;
  }
  .el-icon-search{
    position: absolute;
    right: 10px;
    top: 5px;
    color: #0B085F;
  }
}
.account-box {
  min-width: 150px;
  height: 100%;
  text-align: right;
  position: relative;
  z-index: 10;
  cursor: default;
  display: flex;
  align-items: center;
  .account-name{
    display:block;
    white-space:nowrap;
    font-size:14px;
    font-weight:400;
    color:#666666;
  }
  .account-avatar{
    width:36px;
    height:36px;
    margin-right:10px;
  }
}
.account-box .icon-ct {
  font-size: 18px;
  color: #C6C6C6;
  margin-left: 8px;
  margin-right: 20px;
}
.account-box:hover .alert-nav-link,
.account-box:hover .icon-up,
.account-msg:hover .msg-nav-link {
  display: block;
}
.account-box:hover .icon-down,
.icon-up {
  display: none;
}
.alert-nav-link {
  width: 160px;
  height: auto;
  background-color: #ffffff;
  position: absolute;
  top: 70px;
  right: 10px;
  z-index: 100;
  display: none;
  border: 1px solid #e6e6e6;
  padding: 4px 0;
  border-radius: 8px;
}
.alert-nav-link .item {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 30px;
  &:hover{
    background: rgba(39,116,244,0.1);
    color: #2774F4;
  }
}
.alert-nav-link .item a {
  line-height: 46px;
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: #72787C;
  display: flex;
  align-items: center;
  &:hover{
    color: #2774F4;
    .icon{
      color: #2774F4;
    }
  }
}
.alert-nav-link .item a .icon {
  color: #72787C;
  margin-right: 12px;
}
</style>
